<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>public-sidebar-header</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/public/public-sidebar-header.css">
</head>

<body>
    <header>
        <a href=""><img src="img/material/量子logo.png" alt=""></a>
        <div class="header_img">
            <img src="img/material/yonghu.jpg" alt="">
            <p>
                <span>四菜一汤</span>
                <a href="login.html">退出</a>
            </p>
        </div>
    </header>
    <aside>
        <ul class="sidebar-ul">
            <li class="a1"><a href="javascript:void(0)"> <span class="fa fa-home"></span>&nbsp;&nbsp;&nbsp;首页</a></li>
            <li class="a1 s2"><a href="javascript:void(0)"> <span class="fa fa-mortar-board (alias)"></span>&nbsp;&nbsp;&nbsp;<em>院校管理</em></a></li>
            <li class="a1 s2"><a href="javascript:void(0)"> <span class="fa fa-address-book">&nbsp;&nbsp;&nbsp;</span><em>学生管理</em></a> </li>
            <li class="a1 s2"><a href="javascript:void(0)"> <span class="fa fa-line-chart">&nbsp;&nbsp;&nbsp;</span><em>业绩管理</em></a></li>
            <li class="sidebar-ul-li s2">
                <a href="javascript:void(0)">
                    <span class="fa fa-share"></span>&nbsp;&nbsp;&nbsp;<em>数据分析</em>
                    <span class="fa fa-sort-desc sidebar-ul-li-f1"></span>
                </a>
                <div class="li_list">
                    <p><a href="javascript:void(0)">市场统计</a></p>
                    <p><a href="javascript:void(0)">口碑统计</a></p>
                    <p><a href="javascript:void(0)">就业统计</a></p>
                    <p><a href="javascript:void(0)">就业率统计</a></p>
                </div>
            </li>
            <li class="a1 s2"><a href="javascript:void(0)"><span class="fa fa-clock-o"></span>&nbsp;&nbsp;&nbsp;<em>提醒功能</em></a>
            </li>
        </ul>
    </aside>
    <iframe src="homepage.html" frameborder="0"></iframe>

</body>

</html>
<script src="js/jquery-3.4.1.js"></script>
<script>
    $(function () {
        $(".a1:eq(0)").click(function () {
            $("iframe").attr('src', 'homepage.html');
        });
        $(".a1:eq(1)").click(function () {
            $("iframe").attr('src', 'academy.html');
        });
        // student management
        $(".a1:eq(2)").click(function () {
            $("iframe").attr('src', 'student management.html');
        });
        $(".a1:eq(3)").click(function () {
            $("iframe").attr('src', 'performance.html');
        });
        $(".a1:eq(4)").click(function () {
            $("iframe").attr('src', 'Remind.html');
        });
        $(".li_list p:eq(0)").click(function () {
            $("iframe").attr('src', 'agora.html');
        });
        $(".li_list p:eq(1)").click(function () {
            $("iframe").attr('src', 'public-praise.html');
        });
        $(".li_list p:eq(2)").click(function () {
            $("iframe").attr('src', 'employment.html');
        });
        $(".li_list p:eq(3)").click(function () {
            $("iframe").attr('src', 'status.html');
        });
        var onOff = true;
        $('.sidebar-ul-li>a').click(function () {
            if (onOff) {
                $('.li_list').css('display', 'block');
                $('.sidebar-ul-li-f1').addClass('fa fa-sort-up (alias)').css('top', '25px');
                onOff = false;
            }

            else {
                $('.li_list').css('display', 'none');
                $('.sidebar-ul-li-f1').removeClass('fa-sort-up (alias)').css('top', '10px');
                onOff = true;
            }
        });

        $('.a1').click(function () {
            $(this).css('background', '#3c9688').siblings().css('background', '#20222A');
            $('.li_list>p').css('background', '#20222A');
        });
        $('.li_list>p').click(function () {
            $(this).css('background', '#3c9688').parent().parent().siblings().css('background', '#20222A');
            $(this).css('background', '#3c9688').siblings().css('background', '#20222A');
        });
    });
    // 侧边栏
    $(function () {
        var jsonUser = localStorage.getItem('jsonId');//将登录时获取的数据存入localStorage
        var dataObj = eval("(" + jsonUser + ")");//使用eval方法将String类型的数据转化为JSON类型
        // console.log(dataObj)
        var list = dataObj.result;
        for (var i = 0; i < list.length; i++) {
            $('em').each(
                function (i, e) {
                    if (list[i].moduleName == $(e).html()) {
                        // console.log(list[i].moduleName)
                        $('.s2:eq('+ i +')').css('display', 'block');
                    }
                }
            );
        }
    });
</script>